<template>
  <div>
    <book-header>{{ text }}</book-header>
    <div v-show="blockShow == 1">
      <div class="martop">
        <cateBookList ref="booklist"></cateBookList>
      </div>
    </div>
    <div v-show="blockShow == 2">
      <div class="martop">
        <List2 :obj="endedBook"></List2>
      </div>
    </div>
  </div>
</template>

<script>
import { getendbook } from "@/request/api.js";
import cateBookList from "@/components/cateBookList";
import List2 from "@/components/List2";
import BookHeader from "../components/bookHeader.vue";
export default {
  components: {
    cateBookList,
    List2,
    BookHeader,
  },
  data() {
    return {
      cateId: -1,
      text: "分类",
      blockShow: 1,
      endedBook: {
        name: "",
        list: [],
      },
      uuid: -1,
    };
  },
  methods: {
    getData() {
      getendbook("/store/bookList.json?uuid=" + this.uuid).then((res) => {
        if (res.data) {
          this.endedBook.list = res.data.books;
        }
      });
    },
  },
  activated() {
    let p = this.$route.query.params;
    if (p.length > 10) {
      if (this.cateId != p) {
        this.uuid = this.$route.query.params;
        this.blockShow = 2;
        this.getData();
        this.cateId = this.$route.query.params;
        this.text = this.$route.query.name;
      }
    } else {
      this.blockShow = 1;
      if (this.cateId != p) {
        this.$refs["booklist"].getData(p);
        this.cateId = this.$route.query.params;
        this.text = this.$route.query.name;
      }
    }
  },
  mounted() {
    this.$refs["booklist"].getData(this.cateId);
  },
  created() {
    if (this.$route.query.params.length < 10) {
      this.cateId = this.$route.query.params;
      this.text = this.$route.query.name;
      this.blockShow = 1;
    } else {
      this.uuid = this.$route.query.params;
      this.blockShow = 2;
      this.getData();
    }
  },
};
</script>

<style lang="scss" scoped>
.martop {
  margin-top: 50px;
  width: 100vw;
}
</style>